<template>
    <div class="game-page publish-game-page">
        <form @submit="() => { return false; }">
            <div class="basic-box">
                <div class="panel-tit">游戏信息</div>
                <div class="p-field-control" id="form_title">
                    <input type="text" v-model="form.title" placeholder="请输入游戏名称" maxlength="60"><i class="word-num">{{60-form.title.length}}</i>
                </div>
                <div class="p-field-control" id="form_content" >
                    <quillEditor class="pro-quill-editor" ref="refEditor" v-model="form.content" :options="editorOption" @input="onEditInput($event)"></quillEditor>
                    <i class="word-num bot-r">{{1000-textLen}}</i>
                </div>
                <div class="drop-down-control">
                    <div class="flex-ddl-item">
                        <DropDown id="form_categoryId" class="mr20"  :list="allCateTypes.categorys" :value.sync="form.categoryId" placeholder="类型" />
                        <DropDown id="form_style" class="mr20"  :list="allCateTypes.styles" :value.sync="form.style" placeholder="风格" />
                        <DropDown id="form_device" :list="allCateTypes.devices" :value.sync="form.device" placeholder="设备" />
                    </div>
                    <div class="flex-ddl-item">
                        <DropDown  id="form_orientation" class="mr20" :list="allCateTypes.orientations" :value.sync="form.orientation" placeholder="版式" />
                        <DropDown  id="form_era" class="mr20" :list="allCateTypes.eras" :value.sync="form.era" placeholder="上线年份" />
                        <DropDown  id="form_comeFrom" :list="allCateTypes.sources" :value.sync="form.comeFrom" placeholder="来源" />
                    </div>
                    <div class="flex-ddl-item">
                        <DropDown  id="form_theme" class="mr20" :maxlength="10" :multiple="true" :list="allCateTypes.themes" :value.sync="form.imagesBean.tagNames" placeholder="归类主题" />
                        <DropDown  id="form_copyRight" :list="allCateTypes.copyrights" :value.sync="form.copyRight" placeholder="游戏版权" />
                    </div>
                </div>
                <div class="panel-tit mt40">
                    <div class="has-rmk">
                        上传封面<span
                        class="small-tip">支持jpg\png\gif格式，建议尺寸800x600px,大小不超过5M；请不要上传含其他网站水印的内容</span>
                    </div>
                </div>
                <div id="form_image">
                    <el-upload :action="aliInfo.host" :show-file-list="false" :data="aliData" accept=".jpg,.png,.gif"
                        :on-success="firstPictureSuccess" :drag="true" :before-upload="firstPictureBefore"
                        class="upload-btn">
                        <img loading="lazy" v-if="form.image" :src="form.image" style="width: 100%; height: 100%" class="avatar" />
                    </el-upload>
                </div>
                <div class="panel-tit mt48 flex-between">
                    <div class="has-rmk">
                        上传视频<span class="small-tip">暂时仅支持视频平台外链导入（腾讯视频/优酷/B站等）</span>
                    </div>
                    <div class="pro-import-area">
                        <a class="import-video-btn" @click="isNotAreaImport=true;showImport = !showImport">导入视频</a>
                        <div class="pro-import-video-box" v-if="showImport">
                            <textarea v-model="linkText" placeholder="粘贴视频链接到此处，支持腾讯视频、优酷视频、bilibili"></textarea>
                            <div class="btns">
                                <a class="cancel" @click="showImport = false">取消</a>
                                <a class="add" @click="addLink">添加</a>
                            </div>
                        </div>
                        <div class="modal-mask" v-if="showImport" @click="showImport = false">

                        </div>
                    </div>
                </div>
                <div class="upload-videos">
                    <a class="upload-video-btn zdy_upload_video" v-for="(item,idx) in form.videoUrl" :key="idx" @click="chooseVideo(item,idx)">
                        <template v-if="item.url">
                            <template v-if="item.url.indexOf('v.qq.com')>-1||item.url.indexOf('bilibili.com')>-1||item.url.indexOf('youku.com')>-1">
                                <iframe class="ifrm-play" frameborder="0" :src="item.url+'&autoplay=0'" allowFullScreen="true"></iframe>
                            </template>
                            <img loading="lazy" :src="item.url+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto'" alt="" v-else>
                            <span class="play-icon"></span>
                            <a class="del-btn" @click.stop="item.url='';$forceUpdate();"></a>
                        </template>
                    </a>
                    <!-- <el-upload v-for="(item, idx) in form.videoUrl" :key="idx" class="upload-video-btn"
                        :action="aliInfo.host" :show-file-list="false" :data="aliData" accept=".mp4,.avi" :drag="true"
                        :on-error="videoUpError" :before-upload="(file) => { return videoUploadBefore(file, idx) }"
                        :on-progress="videoProgress" :on-success="onVideoSucc">
                        <video controls :src="item.url" v-if="item.percentage == 100"></video>
                    </el-upload> -->
                </div>
                <div class="panel-tit mt40">其他设置</div>
                <!-- <div class="p-label-field-control">
                    <label>开发商</label><input v-model="form.manufacturer" type="text" placeholder="请输入开发商">
                </div> -->
                <div class="p-label-field-control mt40">
                    <label>评论</label><el-checkbox class="pro-pbform-ckbox" :true-label="1" :false-label="0"
                        v-model="form.commentStatus">关闭评论</el-checkbox>
                </div>
            </div>
            <div class="game-img-workbox">
                <div class="panel-tit flex-between">
                    <div class="tit">常驻系统<el-tooltip popper-class="mini-tip-pop" content="展示系统功能、战斗UI、背包等" placement="bottom" effect="light"><i class="el-icon-question"></i></el-tooltip></div>
                    <div class="funs" v-if="form.images.length > 0">
                        <template v-if="isBatchGimg">
                            <span class="img-select-len">已选中<i>{{ imgSelectLen }}</i>个 <i class="cancel-select"
                                    @click="handleCancelSelect('images')"></i></span>
                            <a class="select-all" @click="selectAll('images')">{{ isCkall ? '取消全选' : '全选' }}</a>
                            <a class="put-tag" @click="setType=1;giveType=1;showSetTag = true">标签</a>
                            <!-- <a class="img-move-to" @click="handleMoveTo('act')">移动至活动</a> -->
                            <a class="del-img" @click="handleRemove('images')">删除</a>
                        </template>
                        <a class="batch-mgr-btn" v-else @click="batchSel('images')">批量管理</a>
                    </div>
                </div>
                <div class="single-upload-btn pro-dnd-area" v-show="form.images.length == 0">
                    <div class="ass-con">
                        <i class="up-text">上传常驻系统</i>
                        <div class="plus">拖拽图片到这里，或 <a class="go-add pro_zdy_myupload">点此添加</a></div>
                        <i class="tip">支持jpg/png/gif格式，单个文件最大支持10M</i>
                    </div>
                </div>
                <!-- <template v-if="form.images.length>0"> -->
                <div class="g-img-mx-harea" v-show="form.images.length > 0">
                    <div class="gm-imgs">
                        <div class="g-img-item" :class="[{ 'act-sel': isBatchGimg }]" v-for="(img, idx) in form.images"
                            :key="idx">
                            <template>
                                <img loading="lazy" v-if="img.progressno == 100" :src="img.url" alt="">
                                <span class="btns hid-el">
                                    <!-- <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                        <i class="sm-tip" slot-content>移至活动系统</i>
                                        <a slot="reference" class="move-btn" @click="img.selected = true; handleMoveTo('act')"></a>
                                    </el-popover> -->
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                        <i class="sm-tip" slot-content>查看大图</i>
                                        <a slot="reference" class="view-btn" @click="curImgUrl=img.url;showViewImg=true;"></a>
                                    </el-popover>
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                        <i class="sm-tip" slot-content>删除</i>
                                        <a slot="reference" class="del-btn" @click="keyProperty = 'images'; img.selected = true; showDelConfirm = true;"></a>
                                    </el-popover>
                                </span>
                                <!-- <a class="set-tag hid-el" @click="setShowTag(idx)">设置标签</a> -->
                                <a class="select-btn" :class="{ 'active': img.selected }"
                                    @click="img.selected = !img.selected"></a>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="bot-single-upload-area pro-dnd-area" v-show="form.images.length > 0">
                    <div class="plus">拖拽图片到这里，或 <a class="go-add pro_zdy_myupload">点此添加</a></div>
                    <span class="tip">已上传 {{ form.images.length }} 张</span>
                </div>
                <!-- </template> -->

                <!-- <div class="panel-tit flex-between mt31">
                    <div class="tit">活动系统<el-tooltip popper-class="mini-tip-pop" content="展示运营Banner、节日活动、广告图等" placement="bottom" effect="light"><i class="el-icon-question"></i></el-tooltip></div>
                    <div class="funs" v-if="form.activityImages.length > 0">
                        <template v-if="isBatchActImg">
                            <span class="img-select-len">已选中<i>{{ actImgSelectLen }}</i>个<i class="cancel-select"
                                    @click="handleCancelSelect('activityImages')"></i></span>
                            <a class="select-all" @click="selectAll('activityImages')">{{ isActCkall ? '取消全选' : '全选' }}</a>
                            <a class="put-tag" @click="setType=2;giveType=1;showSetTag = true">标签</a>
                            <a class="img-move-to" @click="handleMoveTo('game')">移动至游戏</a>
                            <a class="del-img" @click="handleRemove('activityImages')">删除</a>
                        </template>
                        <a class="batch-mgr-btn" v-else @click="batchSel('activityImages')">批量管理</a>
                    </div>
                </div>
                <div class="single-upload-btn pro-act-dnd-area" v-show="form.activityImages.length == 0">
                    <div class="ass-con">
                        <i class="up-text">上传活动系统</i>
                        <div class="plus">拖拽图片到这里，或 <a class="go-add pro_zdy_activityimgupload">点此添加</a></div>
                        <i class="tip">支持jpg/png/gif格式，单个文件最大支持10M</i>
                    </div>
                </div> -->
                <div class="g-img-mx-harea" v-show="form.activityImages.length > 0">
                    <div class="gm-imgs">
                        <div class="g-img-item" :class="[{ 'no-img': idx > 5, 'act-sel': isBatchActImg }]"
                            v-for="(img, idx) in form.activityImages" :key="idx">
                            <template>
                                <img loading="lazy" v-if="img.progressno == 100" :src="img.url" alt="">
                                <span class="btns hid-el">
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                        <i class="sm-tip" slot-content>移至常驻系统</i>
                                        <a slot="reference" class="move-btn" @click="img.selected = true; handleMoveTo('game')"></a>
                                    </el-popover>
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                        <i class="sm-tip" slot-content>查看大图</i>
                                        <a slot="reference" class="view-btn" @click="curImgUrl=img.url;showViewImg=true;"></a>
                                    </el-popover>
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                        <i class="sm-tip" slot-content>删除</i>
                                        <a slot="reference" class="del-btn" @click="keyProperty = 'activityImages'; img.selected = true; showDelConfirm = true;"></a>
                                    </el-popover>
                                    
                                </span>
                                <!-- <a class="set-tag hid-el" @click="showSetTag = true; setIdx = idx; setType = 2;giveType=2;">设置标签</a> -->
                                <a class="select-btn" :class="{ 'active': img.selected }"
                                    @click="img.selected = !img.selected"></a>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="bot-single-upload-area pro-act-dnd-area" v-show="form.activityImages.length > 0">
                    <div class="plus" v-if="!activeUploadIndex">拖拽图片到这里，或 <a
                            class="go-add pro_zdy_activityimgupload">点此添加</a></div>
                    <div class="plus-sk" v-else>松开上传</div>
                    <span class="tip">已上传 {{ form.activityImages.length }} 张</span>
                </div>
            </div>
        </form>
        <div class="footer-fun-bar">
            <a class="publish" @click="batchArticle(0)">{{ form.id ? '修改' : '发布' }}游戏截图</a>
            <a class="preview" @click="handlePreviewFun">预览</a>
            <a class="draft" @click="batchArticle(2)">存入草稿</a>
        </div>

        <!-- <div class="cover-win-box" v-show="showCut">
            <div class="u-header">上传封面 <a class="close-win-box" @click="showCut = false"></a></div>
            <div class="win-modal-con">
                <div class="left">
                    <img loading="lazy" :src="croPoption.image" ref="gimage" id="gimage" alt="" />
                </div>
                <div class="result">
                    <span class="img-box preview-img">

                    </span>
                    <span class="preview-tit">效果预览</span>
                </div>
            </div>
            <div class="fbar">
                <el-upload class="again-upload" :action="aliInfo.host" :show-file-list="false" :data="aliData"
                    :on-success="firstPictureSuccess" :before-upload="firstPictureBefore">重新上传</el-upload>
                <a class="cut-btn" @click="handleConfirmCrop">裁切</a>
            </div>
        </div> -->

        <a-modal v-model="showCut" destroyOnClose centered :footer="null" :closable="false" width="840px">
            <div class="cover-win-box">
                <div class="u-header">上传封面 <a class="close-win-box" @click="showCut=false"></a></div>
                <div class="win-modal-con">
                    <div class="left">
                        <img loading="lazy" :src="croPoption.image" ref="gimage" id="gimage" alt="" />
                    </div>
                    <div class="result">
                        <span class="img-box preview-img">
                            
                        </span>
                        <span class="preview-tit">效果预览</span>
                    </div>
                </div>
                <div class="fbar">
                    <el-upload class="again-upload" :action="aliInfo.host"
                    :show-file-list="false"
                    :data="aliData"
                    :on-success="firstPictureSuccess"
                    :before-upload="firstPictureBefore">重新上传</el-upload>
                    <a class="cut-btn" @click="handleConfirmCrop">裁切</a>
                </div>
            </div>
        </a-modal>

        <a-modal v-model="showSetTag" destroyOnClose centered :footer="null" :closable="false" width="840px">
            <div class="cover-win-box set-img-tag-win-box">
                <div class="u-header">设置标签 <a class="close-win-box" @click="showSetTag = false"></a></div>
                <form class="set-tag-modal-con" onsubmit="return false">
                    <div class="inp-control-box">
                        <input type="text" maxlength="10"v-model="tagkeyword" @keypress.enter="onEnter" placeholder="新增或搜索标签（方便用户进行标签搜索和创建新标签）"><i v-if="tagkeyword" @click="tagkeyword=''" class="clear-by-search"></i>
                    </div>
                    <div class="tj-tags">
                        <div class="label">推荐标签</div>
                        <div class="tags">
                            <template v-if="!tagkeyword">
                                <span :class="{'active':tag.selected}" v-for="(tag,tdx) in allCateTypes.funs" v-if="(showMoreTag||tdx<20)&&tag.title!='全部'" @click="chooseTag(tag)">{{tag.title}}</span>
                                <span class="more-tag" :class="{ 'up': showMoreTag }" @click="showMoreTag = !showMoreTag"></span>
                            </template>
                            <template v-else>
                                <span :class="{'active':tag.selected}" v-for="(tag,tdx) in allCateTypes.funs" v-if="tag.show&&tag.title!='全部'" @click="chooseTag(tag)">{{tag.title}}</span>
                            </template>
                            <!-- <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span>游戏杂谈</span>
                            <span>教程攻略</span>
                            <span v-for="i in 30" :key="i" v-if="i < 8 || showMoreTag">游戏杂谈</span> -->
                        </div>
                    </div>
                    <div class="tj-tags">
                        <div class="label">最近使用</div>
                        <div class="tags">
                            <span>暂停</span>
                            <span>招募</span>
                            <span>排行榜</span>
                            <span>木头</span>
                            <span>暂停</span>
                            <span>招募</span>
                            <span>排行榜</span>
                            <span>木头</span>
                        </div>
                    </div>
                </form>
                <div class="fbar">
                    <a class="again-upload" @click="showSetTag = false">取消</a>
                    <a class="cut-btn" @click="handleConfirmAddTag">确定</a>
                </div>
            </div>
        </a-modal>

        <a-modal v-model="showConfirm" destroyOnClose centered :footer="null" :closable="false" width="408px">
            <div class="confirm-mask">
                <div class="confirm-win">
                    <div class="title">确定要离开吗?</div>
                    <div class="msg">系统可能不会保存填写的信息哦～</div>
                    <div class="btns">
                        <a class="confirm" @click="handleOK">确定</a>
                        <a class="cancel" @click="showConfirm=false">取消</a>
                    </div>
                </div>
            </div>
        </a-modal>

        <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null" :closable="false" width="366px">
            <div class="fav-component">
                <div class="fav-header">
                    删除提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定删除吗？删除后当前内容都会被删除且不可恢复。
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="handleConfirmDel">确认</a>
                    <a class="pro-confirm-btn" @click="showDelConfirm = false">取消</a>
                </div>
            </div>
            <!-- <div class="modal-mask" @click="showDelConfirm = false">

            </div> -->
        </a-modal>

        <Play :url="playUrl" @close="showPlay=false" :isthird="isThirdPlay" v-if="showPlay"/>

        
        <ViewImg :url="curImgUrl" v-if="showViewImg" @close="showViewImg=false"/>
    </div>
</template>

<script>
import ViewImg from '@/components/viewImg'
import Play from './play'
import { quillEditor } from "vue-quill-editor";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
import "../../../static/utils/jquery.js";
import "../../../static/utils/webuploader.js";
import api from '@/api/api'
import DropDown from '@/components/dropdown'
export default {
    components: {
        DropDown, quillEditor,Play,ViewImg
    },
    computed: {
        imgSelectLen() {
            let datas = this.form.images.filter(r => {
                return r.selected;
            })
            return datas.length;
        },
        actImgSelectLen() {
            let datas = this.form.activityImages.filter(r => {
                return r.selected;
            })
            return datas.length;
        }
    },
    data() {
        return {
            isposted:false,
            isThirdPlay:false,
            textLen:0,
            tagkeyword:'',
            giveType:1,
            setType:1,
            curImgUrl:'',
            showViewImg:false,
            isNotAreaImport:false,
            showPlay:false,
            playUrl:'',
            funsList:[],
            keyProperty: '',
            showDelConfirm: false,
            isActCkall: true,
            isCkall: true,
            isBatchActImg: false,
            isBatchGimg: false,
            linkText: '',
            showImport: false,
            showConfirm: false,
            nextFun: null,
            showMoreTag: false,
            showSetTag: false,
            cropFileName: '',
            showCut: false,
            activeUploadIndex: false,
            form: {
                content: '',
                title: '',
                images: [],
                activityImages: [],
                imagesBean: {
                    imageList: [],
                    tagNames: ''
                },
                videoUrl: [{}, {}, {}, {}, {}, {}]
            },
            editorOption: {
                placeholder: '介绍一下游戏特色，让用户更感兴趣...（非必填）',
                modules: {
                    toolbar: {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
                            ['blockquote', 'code-block'],                      //引用，代码块
                            [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表，无序列表
                            [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标，上角标
                            [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
                            [{ 'direction': 'rtl' }],                         // 文字输入方向
                            [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
                            [{ 'color': [] }, { 'background': [] }],          // 颜色选择
                            [{ 'font': [] }],// 字体
                            [{ 'align': [] }], // 居中
                            ['clean'],
                            ['link', 'image', 'video']
                        ]
                    }
                }
            },
            croPoption: {
                image: "",
                outputSize: 1, // 裁剪生成图片的质量 0.1 - 1
                outputType: "png", //	裁剪生成图片的格式 jpeg || png || webp
                canScale: false, // 图片是否允许滚轮缩放 默认true
                autoCrop: true, // 是否默认生成截图框 默认false
                canMove: true, //上传图片是否可以移动 默认true
                autoCropWidth: 800, //默认生成截图框宽度	容器的80%	0~max
                autoCropHeight: 600, //默认生成截图框高度	容器的80%	0~max
                // fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
                fixed: true, //是否开启截图框宽高固定比例
                original: true, // 上传图片按照原始比例渲染	false	true | false
                infoTrue: true, // 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true | false
                centerBox: true, // 截图框是否被限制在图片里面	false	true | false
                canMoveBox: false, //截图框能否拖动	true	true | false
                fixedNumber: [1, 1], // 截图框的宽高比例 [宽度, 高度]
            },
            aliInfo: {
                host: ''
            },
            aliData: {},
            myCropper: null,
            allCateTypes: {
                categorys: [],
                themes: [],
                funs: [],
                materials: [],
                devices: [],
                orientations: [],
                eras: [],
                styles: [],
                styles: [],
                sources: []
            },
            videoIdx: 0
        }
    },
    watch:{
        $route(newd){
            if(!newd.params.id){
                this.form={
                    content: '',
                    title: '',
                    images: [],
                    activityImages: [],
                    imagesBean: {
                        imageList: [],
                        tagNames: ''
                    },
                    videoUrl: [{}, {}, {}, {}, {}, {}]
                }
            }else{
                this.initQuery();
            }
        },
        tagkeyword(newd){
           this.allCateTypes.funs.map(item=>{
            if(item.title.indexOf(newd)>-1){
                item.show=true;
            }else{
                item.show=false;item.showOther=false;
            }
           })
           this.$forceUpdate();
        }
    },
    async mounted() {
        $('#app').removeClass('info-detail-page');
        let _allCateTypes = JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));
        _allCateTypes.categorys=_allCateTypes.categorys.filter(r=>{
            return r.value!='';
        })
        _allCateTypes.styles=_allCateTypes.styles.filter(r=>{
            return r.value!='';
        })
        _allCateTypes.eras=_allCateTypes.eras.filter(r=>{
            return r.value!='';
        })
        _allCateTypes.devices=_allCateTypes.devices.filter(r=>{
            return r.value!='';
        })
        _allCateTypes.orientations=_allCateTypes.orientations.filter(r=>{
            return r.value!='';
        })
        _allCateTypes.funs.map(item=>{
            item.show=true;
        })
        let res = await api.getAttributes({ type: 'from', categoryId: 22 })
        res.data.from.map(item => {
            item.title = item.name;
            item.value = item.name;
        })
        _allCateTypes.sources = res.data.from;
        res = await api.getAttributes({ type: 'copyright', categoryId: 22 })
        res.data.copyright.map(item => {
            item.title = item.name;
            item.value = item.name;
        })
        _allCateTypes.copyrights = res.data.copyright;
        this.allCateTypes = _allCateTypes;

        this.funsList=_allCateTypes.funs;
        
        this.initQuery();

        let that = this;

        // this.form.videoUrl.map(item=>{
        //     item.key=
        // })
        this.$nextTick(() => {
            that.initActivityImgUpload();
            that.initUpload();
            // that.initZuploadvideo();
            
            if($('.t-adv').length>0){
                $('#app').addClass('b-has-adv');
            }
        })
        
    },
    destroyed(){
        window.removeEventListener('beforeunload', this.beforeUnload);
    },
    created(){
        window.addEventListener('beforeunload', this.beforeUnload);
    },
    beforeRouteLeave(to, from, next) {
        let data = this.form;
        this.nextFun = next;
        let _upvlens = data.videoUrl.filter(r => {
            return !!r.url;
        }).length;
        if (data.title || data.content || data.categoryId || data.style || data.device || data.orientation || data.era || data.comeFrom || data.imagesBean.tagNames || data.copyRight || data.manufacturer || data.commentStatus > 0 || data.image || _upvlens > 0 || data.images.length > 0 || data.activityImages.length > 0) {
            this.showConfirm = true;
        } else {
            next()
        }
    },
    methods: {
        beforeUnload(event) {
            event.preventDefault();
            event.returnValue = '';
        },
        onEditInput(){
            let obj=this.$refs['refEditor'].quill;
            let len=obj.getText().length-1;
            this.textLen=len;
            if(len>1000){
                // this.$amessage.warn('最多输入1000字~');
                let _text=obj.getText().slice(0,1000);
                obj.setText(_text);
            }
        },
        onEnter(){
            let val=this.tagkeyword.trim();
            if(!val)return;
            let _isExists=this.allCateTypes.funs.filter(r=>{
                return r.title==val;
            })
            if(_isExists.length>0){
                this.tagkeyword='';
                this.$amessage.warn('标签已存在')
                return;
            }
            this.allCateTypes.funs=[...[{title:val,selected:true,show:true}],...this.allCateTypes.funs];
            // if(this.setType==1){
            //     if(this.form.images[this.setIdx].tags.length==10){
            //         this.$amessage.warn('最多可设置10个标签')
            //     }else{
            //         this.form.images[this.setIdx].tags.push(val);
            //         this.$amessage.success('添加成功')
            //     }
            // }else{
            //     if(this.form.activityImages[this.setIdx].tags.length==10){
            //         this.$amessage.warn('最多可设置10个标签')
            //     }else{
            //         this.form.activityImages[this.setIdx].tags.push(val);
            //         this.$amessage.success('添加成功')
            //     }
            // }
            this.showMoreTag=true;
            this.tagkeyword='';
        },
        setShowTag(idx){
            let tags=this.form.images[idx].tags;
            this.allCateTypes.funs.map(item=>{
                item.selected=false;
                if(tags.includes(item.title)){
                    item.selected=true;
                }
            })
            this.setIdx = idx; 
            this.giveType=2;
            this.setType = 1;
            this.showSetTag=true;
        },
        async initQuery(){
            let id = this.$route.params.id;
            let res={};
            if (id) {
                res = await api.getArticleById(id);
                let videos = [];
                if (res.data.videoUrl) {
                    let _urls = res.data.videoUrl.split(',');
                    _urls.map(_url => {
                        videos.push({
                            name: _url,
                            url: _url,
                            completed: true,
                            percentage: 100
                        })
                    })
                }
                if(videos.length<6){
                    let _total=6-videos.length;
                    for(let i=0;i<_total;i++){
                        videos.push({});
                    }
                }
                let model = {
                    id: res.data.id,
                    title: res.data.title,
                    content: res.data.content,
                    images: res.data.imagesBean.imageList ? res.data.imagesBean.imageList.filter(r => { return !r.activity }) : [],
                    activityImages: res.data.imagesBean.imageList ? res.data.imagesBean.imageList.filter(r => { return r.activity == true }) : [],
                    videoUrl: videos,
                    categoryId: res.data.categoryId.toString(),
                    status: res.data.status,
                    commentStatus: res.data.commentStatus,
                    style: res.data.style,
                    device: res.data.device,
                    orientation: res.data.orientation,
                    era: res.data.era,
                    comeFrom: res.data.comeFrom,
                    image: res.data.image,
                    manufacturer: res.data.manufacturer,
                    copyRight:res.data.copyRight,
                    imagesBean: {
                        tagNames: res.data.imagesBean.tagNames.length > 0 ? res.data.imagesBean.tagNames.join(',') : ''
                    }
                }
                model.images.map(item => {
                    item.progressno = 100;
                    item.completed = true;
                    item.selected = false;
                })
                model.activityImages.map(item => {
                    item.progressno = 100;
                    item.completed = true;
                    item.selected = false;
                })
                this.form = model;
            }
        },
        chooseVideo(item,idx){
            this.isNotAreaImport=false;
            if(item.url){
                if(item.url.indexOf('v.qq.com')>-1||item.url.indexOf('bilibili.com')>-1||item.url.indexOf('youku.com')>-1){
                    this.isThirdPlay=true;
                }else{
                    this.isThirdPlay=false;
                }
                this.playUrl=item.url;
                this.showPlay=true;
            }else{
                this.videoIdx=idx;
                this.showImport=true;
            }
        },
        chooseTag(tag){
            tag.selected=tag.selected==undefined?true:!tag.selected;
            let selLen=this.allCateTypes.funs.filter(r=>{
                return r.selected;
            })
            this.$forceUpdate();
            if(selLen.length>10){
                tag.selected=false;
                this.$amessage.warn('最多可设置10个标签')
                return;
            }
        },
        handleConfirmAddTag(){
            let items=this.allCateTypes.funs.filter(r=>{return r.selected;});
            let tags=items.map(r=>{return r.title});
            if(tags.length>10){
                this.$amessage.warn('最多可设置10个标签')
                return;
            }
            if(this.setType==1){
                this.form.images[this.setIdx].tags=tags;
                this.showSetTag=false;
            }else{
                this.form.activityImages[this.setIdx].tags=tags;
                this.showSetTag=false;
            }
            this.allCateTypes.funs.filter(r=>{
                r.selected=false;
            })
        },
        resetForm() {
            this.form = {
                content: '',
                title: '',
                images: [],
                activityImages: [],
                imagesBean: {
                    imageList: [],
                    tagNames: ''
                },
                videoUrl: [{}, {}, {}, {}, {}, {}]
            }
        },
        handleCancelSelect(_property) {
            this.selectAll(_property);
            if (_property == 'images') {
                this.isBatchGimg = false;
            } else {
                this.isBatchActImg = false;
            }
        },
        handleConfirmDel() {
            let _property = this.keyProperty;
            let unSeldatas = this.form[_property].filter(r => {
                return !r.selected;
            })
            this.form[_property] = unSeldatas;
            this.showDelConfirm = false;
        },
        handleRemove(_property) {
            this.keyProperty = _property;
            let selDatas = this.form[_property].filter(r => {
                return r.selected;
            })
            if (selDatas.length == 0) {
                this.$amessage.error( '未选择要删除的图片' )
                return;
            }
            this.showDelConfirm = true;
        },
        handleMoveTo(_target) {
            if (_target == 'act') {
                let selectdatas = this.form['images'].filter(r => {
                    return r.selected;
                })
                if (selectdatas.length == 0) {
                    this.$amessage.error( '未选择要移动的图片' )
                    return;
                }
                let overs = this.form['images'].filter(r => {
                    return !r.selected;
                })
                selectdatas.map(item=>{
                    item.selected=false;
                    item.activity=true;
                })
                this.form.images = overs;
                this.form.activityImages = [...this.form.activityImages, ...selectdatas];
                this.$amessage.success('转移' + selectdatas.length + '个至活动系统成功' )
            } else {
                let selectdatas = this.form['activityImages'].filter(r => {
                    return r.selected;
                })
                if (selectdatas.length == 0) {
                    this.$amessage.error( '未选择要移动的图片' )
                    return;
                }
                let overs = this.form['activityImages'].filter(r => {
                    return !r.selected;
                })
                selectdatas.map(item=>{
                    item.selected=false;
                    item.activity=false;
                })
                this.form.activityImages = overs;
                this.form.images = [...this.form.images, ...selectdatas];
                this.$amessage.success('转移' + selectdatas.length + '个至常驻系统成功' )
            }
        },
        batchSel(_property) {
            if (_property == 'images') {
                this.isCkall = true;
                let _cked = this.isCkall;
                this.form[_property].map(item => {
                    item.selected = _cked;
                })
            } else {
                this.isActCkall = true;
                let _cked = this.isActCkall;
                this.form[_property].map(item => {
                    item.selected = _cked;
                })
            }

            if (_property == 'images')
                this.isBatchGimg = true;
            else
                this.isBatchActImg = true;
        },
        selectAll(_property) {
            if (_property == 'images') {
                this.isCkall = !this.isCkall;
                let _cked = this.isCkall;
                this.form[_property].map(item => {
                    item.selected = _cked;
                })
            } else {
                this.isActCkall = !this.isActCkall;
                let _cked = this.isActCkall;
                this.form[_property].map(item => {
                    item.selected = _cked;
                })
            }
        },
        addLink() {
            let url = this.linkText;
            let arry = url.match(/(http|https){1}:\/\/[^"'\s]*/);
            let _url='';
            if(arry&&arry.length>0){        
                _url=arry[0]; 
            }
            else{
                arry = url.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/i);
                if(arry&&arry.length>0){     
                    _url=arry[1];
                }
            }
            if(!_url)
            {
                this.$amessage.warn('请复制有效格式的视频地址！');
                return;
            }
            if(this.isNotAreaImport){
                let isFind=false;
                this.form.videoUrl.map(item=>{
                    if(!item.url&&!isFind){
                        item.url=_url;
                        isFind=true;
                    }
                })
                if(isFind==false){
                    this.$amessage.warn('已经导入6个视频');
                }else{
                    this.$amessage.success('导入成功');
                }
            }else{
                this.form.videoUrl[this.videoIdx].url=_url;
                this.$amessage.success('导入成功');
            }
            this.showImport=false;
            this.linkText='';
        },
        handleOK() {
            this.nextFun();
        },
        onVideoSucc(e, file) {
            this.form.videoUrl[this.videoIdx].percentage = 100;
            this.$forceUpdate()
        },
        videoProgress(e, file, fileList) {
            //this.form.videoUrl[this.videoIdx]=file;
        },
        videoUploadBefore(file, idx) {
            this.videoIdx = idx;
            this.aliData.key = this.aliInfo.dir + "/" + new Date().getTime() + file.name;
            this.form.videoUrl[idx].url = this.$savePublishAlihost+'/' + this.aliData.key;
            return true;
        },
        initZuploadvideo() {
            let that = this;
            this.uploaderVideo = WebUploader.create({
                headers: {
                    'token': localStorage.getItem('token')
                },
                compress: false,
                threads: 5,
                duplicate: true,
                auto: true, // 选完文件后，是否自动上传 
                swf: '../../../static/utils/Uploader.swf', // swf文件路径 
                server: that.aliInfo.host, // 文件接收服务端
                pick: '.zdy_upload_video', // 选择文件的按钮。可选 
                formData: that.aliParamsData,
                // 只允许选择图片文件。 
                accept: {
                    title: 'Videos',
                    extensions: 'avi,mp4',
                    mimeTypes: 'video/mp4,video/avi'   //修改这行
                }
            });

            this.uploaderVideo.on('uploadBeforeSend', function (obj, data) {
                let filekey = that.aliInfo.dir + '/' + new Date().getTime() + obj.file.name;
                data.key = filekey;
                that.form.videoUrl.push({ name: obj.file.name, id: obj.file.id, desc: '', url: that.$savePublishAlihost+'/' + filekey, progressno: 0, completed: false, showSucc: false });
            })

            this.uploaderVideo.onUploadProgress = function (file, percentage) {
                if (percentage < 90) {
                    percentage = 89;
                } else if (percentage == 100) {
                    percentage = 90;
                }
                let _d = that.form.videoUrl.filter((f) => f.id == file.id)
                if (_d.length > 0) {
                    _d[0].progressno = percentage;
                    that.$forceUpdate()
                }
            }

            this.uploaderVideo.on('uploadSuccess', function (file, response) {
                let _d = that.form.videoUrl.filter(f => f.id == file.id)
                if (_d.length > 0) {
                    _d[0].progressno = 100;
                    //_d[0].url=response.code!=0?'':response.data;
                    _d[0].completed = true;
                    _d[0].showError = false;

                    setTimeout(function () {
                        _d[0].showError = false;
                    }, 1000)
                    that.$forceUpdate()
                }
            });
        },
        dataURLtoBlob(dataurl) {
            var arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        handleConfirmCrop() {
            if (!this.croPoption.image) {
                this.$amessage.warn("请先选择图片");
                return;
            }
            let that = this;

            let data = that.myCropper.getCroppedCanvas({
                imageSmoothingQuality: 'high'
            }).toDataURL('image/jpeg')
            data = that.dataURLtoBlob(data);

            let _formdata = new FormData();

            let fileUrlKey = that.aliInfo.dir + '/' + new Date().getTime() + that.cropFileName;
            _formdata.append("key", fileUrlKey);
            for (let p in that.aliParamsData) {
                _formdata.append(p, that.aliParamsData[p]);
            }

            _formdata.append("file", data);
            // let index = layer.load(0, { shade: false });
            // axios.post(that.aliInfo.host, _formdata, {
            //     'Content-type': 'multipart/form-data'
            // }).then(res => {
            //     layer.close(index);
            //     that.form.image =that.$savePublishAlihost+'/' + fileUrlKey;
            //     that.$amessage.success("上传成功");
            //     that.handleClearCrop();
            //     //that.yjForm.images.push(that.aliInfo.host + '/' + that.aliData.key);
            //     // 上传成功后的处理
            // }, err => {
            //     layer.close(index);
            //     that.form.image =that.$savePublishAlihost+'/' + fileUrlKey;
            //     that.$amessage.success("上传成功");
            //     that.handleClearCrop();
            //     // 出现错误时的处理
            // })
            $.ajax({
                url: that.aliInfo.host,
                type: "POST",
                cache: false,
                data: _formdata,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (updata) {
                    // layer.close(index);
                    that.form.image = that.$savePublishAlihost+'/' + fileUrlKey;
                    that.$amessage.success("上传成功");
                    that.handleClearCrop();
                },
                error: function (res) {
                    // layer.close(index);

                    that.$amessage.error('上传服务器异常~')
                }
            });
        },
        handleClearCrop() {
            this.showCut = false;
            // $('.cropper-container').remove();
            this.myCropper.destroy();
        },
        /* 封面上传 */
        firstPictureBefore(file) {
            this.cropFileName = file.name;
            var isImage = file.type === "image/jpg";

            if (!isImage) isImage = file.type === "image/jpeg";
            if (!isImage) isImage = file.type === "image/png";
            if (!isImage) isImage = file.type === "image/gif";

            const sizeFalg = file.size / 1024 / 1024 < 5;
            if (!isImage) {
                this.$amessage.warn("封面只能是[JPG,PNG,GIF]格式!");
                return false;
            }
            if (!sizeFalg) {
                this.$amessage.warn("封面大小不能超过 5MB!");
                return false;
            }

            let that = this;
            this.aliData.key = this.aliInfo.dir + "/" + new Date().getTime() + file.name;
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                let img = new Image();
                img.onload = function () {
                    that.croPoption.image = reader.result;

                    that.$forceUpdate();

                    if (!that.showEditCover) {
                        that.activeUploadCoverIndex = false;
                        that.showCut = true;
                    }
                    if (that.myCropper) {
                        that.myCropper.destroy();
                    }
                    that.initCropper();
                    // }
                };
                img.src = reader.result;
            };
            return false;
        },
        initCropper() {
            let that = this;
            that.$nextTick(() => {
                that.myCropper = new Cropper(that.$refs.gimage, {
                    viewMode: 1,
                    cropBoxResizable: true,
                    autoCropArea: 1,
                    aspectRatio: 104 / 78,
                    preview: ".preview-img",
                    dragMode: "move",
                    toggleDragModeOnDblclick: false
                });
            });
        },
        firstPictureSuccess(err, file, fileList) {
            let img = new Image();
            let _URL = window.URL || window.webkitURL;
            let that = this;
            img.onload = function () {
                if (img.width != 800 && img.height != 600) {
                    that.addArticleParam.image = "";
                    that.$amessage.warn("建议尺寸800x600");
                } else {
                    that.$amessage.success("封面上传成功！");
                    that.addArticleParam.image = that.serverUrl + "/" + that.aliData.key;
                }
            };
            img.src = this.serverUrl + "/" + this.aliData.key;
        },
        async initUpload() {
            let res = await api.getImgPoc();

            this.aliInfo = res.data;
            this.aliParamsData = {
                host: res.data.host,
                policy: res.data.policy,
                Signature: res.data.signature,
                OSSAccessKeyId: res.data.accessid
            }

            let that = this;
            this.uploader = WebUploader.create({
                headers: {
                    token: localStorage.getItem("token"),
                },
                dnd: ".pro-dnd-area",
                disableGlobalDnd: true,
                compress: false,
                threads: 5,
                duplicate: true,
                auto: true, // 选完文件后，是否自动上传
                swf: "../../../static/utils/Uploader.swf", // swf文件路径
                server: that.aliInfo.host, // 文件接收服务端
                pick: ".pro_zdy_myupload", // 选择文件的按钮。可选
                formData: that.aliParamsData,
                // 只允许选择图片文件。
                accept: {
                    title: "Images",
                    extensions: "jpg,jpeg,png,gif",
                    mimeTypes: "image/jpg,image/jpeg,image/png,image/gif", //修改这行
                }
            });

            this.uploader.on('uploadBeforeSend', function (obj, data) {
                let filekey = that.aliInfo.dir + '/' + new Date().getTime() + obj.file.name;
                data.key = filekey;
                that.form.images.push({ selected: false, id: obj.file.id, desc: '', url: that.$savePublishAlihost+'/' + filekey, progressno: 0, completed: false, showSucc: false, tags: [] });
            })

            // 拖拽时不接受 js, txt 文件。
            this.uploader.on("dndAccept", function (items) {
                var denied = false,
                    len = items.length,
                    i = 0,
                    // 修改js类型
                    unAllowed = "text/plain;application/javascript ";

                for (; i < len; i++) {
                    // 如果在列表里面
                    if (~unAllowed.indexOf(items[i].type)) {
                        denied = true;
                        break;
                    }
                }

                return !denied;
            });


            this.uploader.on("error", function (er) {

            });

            this.uploader.onUploadProgress = function (file, percentage) {
                if (percentage < 90) {
                    percentage = 89;
                } else if (percentage == 100) {
                    percentage = 90;
                }

                let _d = that.form.images.filter((f) => f.id == file.id);
                if (_d.length > 0) {
                    _d[0].progressno = percentage;
                    that.$forceUpdate();
                }
            };

            this.uploader.on("uploadSuccess", function (file, response) {
                let _d = that.form.images.filter((f) => f.id == file.id);
                if (_d.length > 0) {
                    _d[0].progressno = 100;
                    //_d[0].url = response.data;
                    _d[0].completed = true;
                    _d[0].showSucc = true;

                    let img = new Image();
                    img.src = _d[0].url;
                    img.onload = function () {
                        _d[0].imageWidth = img.width;
                        _d[0].imageHeight = img.height;
                    }
                    setTimeout(function () {
                        _d[0].showSucc = false;
                    }, 1000);
                    that.$forceUpdate();
                }
            });

        },
        async initActivityImgUpload() {
            let res = await api.getImgPoc();

            this.aliInfo = res.data;
            this.aliParamsData = {
                host: res.data.host,
                policy: res.data.policy,
                Signature: res.data.signature,
                OSSAccessKeyId: res.data.accessid
            }

            let that = this;
            this.uploader = WebUploader.create({
                headers: {
                    token: localStorage.getItem("token"),
                },
                dnd: ".pro-act-dnd-area",
                disableGlobalDnd: true,
                compress: false,
                threads: 5,
                duplicate: true,
                auto: true, // 选完文件后，是否自动上传
                swf: "../../../static/utils/Uploader.swf", // swf文件路径
                server: that.aliInfo.host, // 文件接收服务端
                pick: ".pro_zdy_activityimgupload", // 选择文件的按钮。可选
                formData: that.aliParamsData,
                // 只允许选择图片文件。
                accept: {
                    title: "Images",
                    extensions: "jpg,jpeg,png,gif",
                    mimeTypes: "image/jpg,image/jpeg,image/png,image/gif", //修改这行
                },
            });

            this.uploader.on('uploadBeforeSend', function (obj, data) {
                let filekey = that.aliInfo.dir + '/' + new Date().getTime() + obj.file.name;
                data.key = filekey;
                that.form.activityImages.push({ selected: false, id: obj.file.id, desc: '', activity: true, url: that.$savePublishAlihost+'/'+ filekey, progressno: 0, completed: false, showSucc: false, tags: [] });
            })

            // 拖拽时不接受 js, txt 文件。
            this.uploader.on("dndAccept", function (items) {
                var denied = false,
                    len = items.length,
                    i = 0,
                    // 修改js类型
                    unAllowed = "text/plain;application/javascript ";

                for (; i < len; i++) {
                    // 如果在列表里面
                    if (~unAllowed.indexOf(items[i].type)) {
                        denied = true;
                        break;
                    }
                }

                return !denied;
            });


            this.uploader.on("error", function (er) { });

            this.uploader.onUploadProgress = function (file, percentage) {
                if (percentage < 90) {
                    percentage = 89;
                } else if (percentage == 100) {
                    percentage = 90;
                }

                let _d = that.form.activityImages.filter((f) => f.id == file.id);
                if (_d.length > 0) {
                    _d[0].progressno = percentage;
                    that.$forceUpdate();
                }
            };

            this.uploader.on("uploadSuccess", function (file, response) {
                let _d = that.form.activityImages.filter((f) => f.id == file.id);
                if (_d.length > 0) {
                    _d[0].progressno = 100;
                    //_d[0].url = response.data;
                    _d[0].completed = true;
                    _d[0].showSucc = true;

                    let img = new Image();
                    img.src = _d[0].url;
                    img.onload = function () {
                        _d[0].imageWidth = img.width;
                        _d[0].imageHeight = img.height;
                    }
                    setTimeout(function () {
                        _d[0].showSucc = false;
                    }, 1000);
                    that.$forceUpdate();
                }
            });

        },
        handlePreviewFun(){
            let that=this;
            this.batchArticle(2,function(calldata){
                that.$router.push({path: "/game/"+calldata.data.id})
            })
        },
        async batchArticle(_status,callback) {
            if(this.isposted==true){
                this.$amessage.warn('服务器正在处理,请勿频繁操作~');
                return;
            }
            let data = JSON.parse(JSON.stringify(this.form));
            data.status = _status;
            data.images = [...data.images, ...data.activityImages];
            let videos = [];
            data.videoUrl.map(item => {
                // if (item.url && item.percentage == 100) {
                if (item.url) {
                    videos.push(item.url)
                }
            })
            let imgs = [];
            data.images.map(i => {
                if (i.completed) {
                    imgs.push({ url: i.url, tags: i.tags, imageWidth: i.imageWidth, imageHeight: i.imageHeight, activity: i.activity ? true : false })
                }
            })
            // let activityImgs=[];
            // data.activityImages.map(i=>{
            //     if(i.completed){
            //         activityImgs.push({url:i.url,tags:i.tags,imageWidth:i.imageWidth,imageHeight:i.imageHeight})
            //     }
            // })
            delete data.images;
            // data.imagesBean={imageList:[],tagNames:[]};
            data.commentStatus = parseInt(data.commentStatus);
            data.imagesBean.imageList = imgs;

            if (data.imagesBean.tagNames.length > 0) {
                data.imagesBean.tagNames = data.imagesBean.tagNames.split(',');
            } else {
                data.imagesBean.tagNames = [];
            }

            delete data.themes;

            data.videoUrl = videos.join(',');
            delete data.activityImages;
            let res = {};
            data.manufacturer=data.manufacturer?data.manufacturer:'';

            $('.null-error').removeClass('null-error');
            if(!data.title){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_title').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            // if(!data.content){
            //     $('body,html').animate({ scrollTop: 0 }, 100);
            //     $('#form_content').addClass('null-error');
            //     this.$amessage.warn('请先将信息未填写完整~');
            //     return;
            // }
            if(!data.categoryId){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_categoryId').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.style){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_style').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.device){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_device').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.orientation){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_orientation').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.era){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_era').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.comeFrom){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_comeFrom').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(data.imagesBean.tagNames.length==0){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_theme').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.copyRight){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_copyRight').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            if(!data.image){
                $('body,html').animate({ scrollTop: 0 }, 100);
                $('#form_image').addClass('null-error');
                this.$amessage.warn('请先将信息未填写完整~');
                return;
            }
            this.isposted=true;
            if (data.id) {
                res = await api.editArticle(data);
                if (res.code == 0) {
                    this.$bhelper.addCirRecord('GAME');
                    this.$bhelper.addCirRecord('IMAGE');
                    this.$store.dispatch('setLeftMenu',[])
                    this.resetForm();
                    this.isposted=false;
                    this.$amessage.success('更新成功！快去告诉你的粉丝们')
                    this.$router.replace({ path: '/publish/publishManage?t=0&s=22' })
                }
            } else {
                res = await api.addArticle(data);
                if (res.code == 0) {
                    this.$bhelper.addCirRecord('GAME');
                    this.$bhelper.addCirRecord('IMAGE');
                    this.$store.dispatch('setLeftMenu',[])
                    this.resetForm();
                    this.isposted=false;
                    if(!callback)
                    {
                        this.$amessage.success('发布成功！准备接受掌声吧')
                        this.$router.replace({ path: '/publish/publishManage?t=0&s=22' })
                    }else{
                        callback(res);
                    }
                }
            }
        }
    }
}
</script>
<style lang="less">
.game-page {
    >form {
        display: flex;
    }

    .panel-tit {
        font-weight: 500;
        font-size: 16px;
        line-height: 38px;
        margin-bottom: 20px;
        .el-tooltip{
            color:#6A6A80;
            margin-left:10px;
            cursor: pointer;
        }
        .has-rmk{
            line-height:20px;
        }
        .small-tip {
            font-size: 12px;
            color: #6A6A80;
            margin-left: 14px;
        }

        .funs {
            user-select: none;
            display: flex;
            align-items: center;

            a {
                &:active {
                    opacity: .9;
                }
            }
        }

        &.flex-between {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .add-tag {
            // line-height: 38px;
            width: 97px;
            text-align: center;
            border-radius: 10px;
            background: #29272F;
            color: #fff;
            display: inline-block;
            margin-right: 11px;
            font-size: 14px;
        }

        .img-select-len {
            background: #37363E;
            border-radius: 10px;
            padding: 0px 13px;
            padding-right: 0px;
            display: flex;
            width: max-content;
            align-items: center;

            i {
                color: #11CCB1;
                margin: 0px 4px;
                font-style: normal;
            }

            .cancel-select {
                width: 10px;
                height: 10px;
                background: url('../../assets/pro/close_collect.svg') no-repeat;
                background-size: 10px 10px;
                background-position: center;
                cursor: pointer;
                line-height: 38px;
                height: 38px;
                width: 38px;
            }
        }

        .select-all {
            background: #29272F;
            line-height: 38px;
            border-radius: 10px;
            text-align: center;
            width: 97px;
            font-size: 14px;
            display: inline-block;
            margin-left: 17px;
        }

        .img-move-to {
            background: #F8004E;
            background-image: url('../../assets/pro/img_move_icon.svg');
            background-repeat: no-repeat;
            background-position: 15px center;
            line-height: 38px;
            font-size: 14px;
            width: 121px;
            text-align: right;
            background-size: 14px;
            display: inline-block;
            margin-left: 10px;
            border-radius: 10px;
            padding: 0px 12px 0px 15px;
        }

        .put-tag {
            background: #F8004E;
            background-image: url('../../assets/pro/tag_icon.svg');
            background-repeat: no-repeat;
            background-position: 15px center;
            line-height: 38px;
            font-size: 14px;
            width: 97px;
            text-align: center;
            background-size: 14px;
            display: inline-block;
            margin-left: 10px;
            border-radius: 10px;
            padding: 0px 12px 0px 25px;
        }

        .del-img {
            background: #F8004E;
            background-image: url('../../assets/pro/img_del_icon.svg');
            background-repeat: no-repeat;
            background-position: 15px center;
            line-height: 38px;
            font-size: 14px;
            width: 97px;
            text-align: center;
            background-size: 14px;
            display: inline-block;
            margin-left: 10px;
            border-radius: 10px;
            padding: 0px 12px 0px 25px;
        }

        .batch-mgr-btn {
            // line-height: 38px;
            width: 97px;
            text-align: center;
            border-radius: 10px;
            background: #29272F;
            color: #fff;
            display: inline-block;
            font-size: 14px;
        }
    }

    .basic-box {
        width: 50%;
        background: #181818;
        border-radius: 16px;
        padding: 29px 30px;
        .null-error{
            input{
                border:1px solid #11CCB1 !important;
                border-radius: 8px;
            }
            .pro-quill-editor{
                border:1px solid #11CCB1 !important;
                border-radius: 8px;
            }
            .cur{
                border:1px solid #11CCB1 !important;
            }
            .upload-btn{
                border-color:#11CCB1;
            }
        }
        .drop-down-control {
            display: flex;
            flex-wrap: wrap;

            .flex-ddl-item {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                width:100%;
                .mk-cus-ddl{
                    width:50% !important;
                }
            }
        }

        .mt40 {
            margin-top: 40px;
        }

        .mt48 {
            margin-top: 48px;
        }

        .p-field-control {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            margin-bottom: 10px;

            input[type="text"] {
                height: 40px;
                padding-left: 14px;
                border: none;
                width: 100%;
                background: #23232A;
                color: #fff;
                font-size: 14px;
                padding-right: 40px;
            }

            textarea {
                height: 80px;
                padding-left: 14px;
                border: none;
                width: 100%;
                background: #23232A;
                color: #fff;
                font-size: 14px;
                padding-right: 40px;
                resize: none;
                padding-top: 10px;
            }

            .word-num {
                position: absolute;
                right: 14px;
                font-style: normal;
                color: #969696;
                top: 10px;
                background:#23232A;
                padding:0px 10px;
                &.bot-r {
                    bottom: 10px;
                    top: inherit;
                }
            }

            .pro-quill-editor {
                height:80px;
                // ::v-deep {
                .ql-toolbar {
                    display: none !important;
                }

                .ql-container {
                    border: none !important;
                }

                // .ql-editor{
                //     border-radius:4px !important;
                //     border:1px solid #171719 !important;
                //     border-top:1px solid #171719 !important;
                //     height:120px;
                //     background:#171719;
                // }
                // .ql-editor:focus{
                //     border:1px solid red !important;
                // }
                .ql-snow .ql-blank:-webkit-input-placeholder {
                    font-style: normal !important;
                }

                // }
            }
        }

        .import-video-btn {
            line-height: 38px;
            width: 97px;
            text-align: center;
            border-radius: 10px;
            background: #29272F;
            color: #fff;
            font-size: 14px;
            display: inline-block;
        }

        .p-label-field-control {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            input[type="text"] {
                height: 40px;
                padding-left: 14px;
                border: none;
                width: 100%;
                background: #23232A;
                color: #fff;
                font-size: 14px;
                padding-right: 40px;
                border-radius: 8px;
            }

            label {
                color: #fff;
                font-size: 14px;
                margin-right: 36px;
                white-space: nowrap;
                min-width: 40px;
            }

            .word-num {
                position: absolute;
                right: 14px;
                font-style: normal;
                color: #969696;
                top: 10px;

                &.bot-r {
                    bottom: 10px;
                    top: inherit;
                }
            }
        }

        .upload-btn {
            width: 210px;
            height: 160px;
            border-radius: 10px;
            border: 2px dashed #52525C;
            cursor: pointer;
            display: block;
            overflow: hidden;
            background: inherit !important;
            position: relative;
            .el-upload {
                width: 100%;
                height: 100%;
            }

            .el-upload-dragger {
                background-color: #181818;
                width: 100%;
                border: none;
                height: 100%;
                background: url('../../assets/pro/upload_cover.svg') no-repeat;
                background-position: center;
                background-size: 40px 40px;
            }
        }

        .upload-video-btn {
            width: 210px;
            height: 118px;
            border-radius: 10px;
            border: 2px dashed #52525C;
            background: url('../../assets/pro/upload_cover.svg') no-repeat;
            background-position: center;
            background-size: 40px 40px;
            cursor: pointer;
            display: block;
            position: relative;
            overflow: hidden;
            iframe{
                width:100%;
                height:100%;
            }
            
            .play-icon {
                background: url('../../assets/pro/home_v_play.svg') no-repeat;
                background-position: center center;
                display: inline-block;
                position: absolute;
                z-index: 1;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                background-size: 80px;
            }
            .del-btn{
                z-index:1;
                position: absolute;
                top:5px;
                right:5px;
                width:30px;height:30px;
                background:url('../../assets/pro/del_gm_img.svg') no-repeat;
                // position: absolute;
                // left:calc((100% - 30px) / 2);
                // top:calc((100% - 30px) / 2 - 15px);
                margin-left:10px;
                &:hover{
                    background:url('../../assets/pro/del_gm_img_hover.svg') no-repeat;
                }
            }
        }

        .upload-videos {
            display: flex;
            flex-wrap: wrap;
            grid-gap:10px;
            .upload-video-btn {
                // margin-right: 10px;
                // margin-bottom: 10px;
                // overflow: hidden;
                // background: inherit !important;
                width: 210px;
                height: 118px;
                background: url('../../assets/pro/upload_cover.svg') no-repeat;
                background-position: center;
                background-size: 40px 40px;
                >div:last-child {
                    width: 100% !important;
                    height: 100% !important;
                    overflow: hidden;

                    .el-upload-dragger {
                        background: url('../../assets/pro/upload_cover.svg') no-repeat;
                        background-position: center;
                        background-size: 40px 40px;
                        width: 100% !important;
                        height: 100% !important;
                        border-color: #181818 !important;

                        video {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    input {
                        width: 100% !important;
                        height: 100% !important;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .game-img-workbox {
        margin-left: 20px;
        width: 50%;
        background: #181818;
        border-radius: 16px;

        padding: 29px 30px;

        .single-upload-btn {
            background-color: #23232A;
            border: 2px dashed #4E4E57;
            border-radius: 16px;
            // width: 700px;
            // height: 400px;
            height:1000px;
            background-image: url('../../assets/pro/single_upload_bgico.svg');
            background-repeat: no-repeat;
            background-size: 90px 90px;
            background-position: center 38%;
            display: block;
            position: relative;
            text-align: center;

            i {
                font-style: normal;
            }

            .ass-con {
                position: absolute;
                bottom:0px;
                left: 0px;
                right: 0px;
                top:0px;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                // padding-top:169px;
                .up-text {
                    font-size: 20px;
                    font-weight: 500;
                    display: block;
                    line-height: 28px;
                }

                .tip {
                    color: #6A6A80;
                    font-size: 14px;
                    display: block;
                    margin-top: 76px;
                    line-height: 20px;

                    &.mx-w459 {
                        max-width: 459px !important;
                        margin: 0 auto;
                        margin-top: 50px;
                    }
                }

                .plus {
                    // background:url('../../assets/pro/upload_cover.svg') no-repeat;
                    // background-position:left center;
                    // background-size:22px 22px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-left: 30px;
                    margin-top: 25px;
                    line-height: 22px;
                    font-weight: 500;
                    margin-bottom: 14px;
                    font-size: 14px;
                    line-height: 20px;

                    .go-add {
                        font-size: 16px;
                        color: #11CCB1;
                        font-weight: 500;
                        text-decoration: underline;
                        margin-left: 3px;

                        >div:last-child {
                            position: absolute !important;
                            left: 0 !important;
                            top: 0 !important;
                            height: 100% !important;
                            width: 100% !important;
                            opacity: 0;
                        }
                    }
                }
            }
            &.drag-over{
                border-color:#11CCB1;
            }
            &.sk-hover,
            &.webuploader-dnd-over {
                border-color: #11CCB1;
                // background-color: #250C12;
            }
        }

        .g-img-mx-harea {
            max-height: 300px;
            overflow-y: auto;
            position: relative;

            &::-webkit-scrollbar {
                width: 6px;
                height: 8px;
                background-color: transparent;
            }

            /*滚动条的轨道*/
            &::-webkit-scrollbar-track {
                background-color: transparent;
            }

            /*滚动条的滑块按钮*/
            &::-webkit-scrollbar-thumb {
                border-radius: 6px;
                background-color: #29272F;
            }

            /*滚动条的上下两端的按钮*/
            &::-webkit-scrollbar-button {
                height: 0;
            }

            /* 两个滚动条的交汇处 */
            &::-webkit-scrollbar-corner {
                background-color: transparent;
            }
        }

        .mt31 {
            margin-top: 31px;
        }

        .gm-imgs {
            display: flex;
            flex-wrap: wrap;
            grid-gap:10px;
            .g-img-item {
                width: calc((100% - 50px) / 5);
                height: 98px;
                border-radius: 8px;
                overflow: hidden;
                // margin-right: 10px;
                // margin-bottom: 10px;
                user-select: none;
                position: relative;
                cursor: pointer;

                &:nth-child(5n) {
                    margin-right: 0px;
                }

                >img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .btns {
                    position: absolute;
                    top:0px;
                    left: 0px;
                    right: 0px;
                    bottom:0px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .move-btn {
                    display: flex;
                    width: 30px;
                    height: 30px;
                    background: url('../../assets/pro/move_gm_img.svg') no-repeat;

                    // position: absolute;
                    // left:calc((100% - 30px) / 2);
                    // top:calc((100% - 30px) / 2 - 15px);
                    &:hover {
                        background: url('../../assets/pro/move_gm_img_hover.svg') no-repeat;
                    }
                }

                .view-btn {
                    width: 30px;
                    height: 30px;
                    display: flex;
                    background: url('../../assets/pro/view_gm_img.svg') no-repeat;
                    // position: absolute;
                    // left:calc((100% - 30px) / 2);
                    // top:calc((100% - 30px) / 2 - 15px);
                    margin-left: 10px;

                    &:hover {
                        background: url('../../assets/pro/view_gm_img_hover.svg') no-repeat;
                    }
                }

                .del-btn {
                    width: 30px;
                    height: 30px;
                    display: flex;
                    background: url('../../assets/pro/del_gm_img.svg') no-repeat;
                    // position: absolute;
                    // left:calc((100% - 30px) / 2);
                    // top:calc((100% - 30px) / 2 - 15px);
                    margin-left: 10px;

                    &:hover {
                        background: url('../../assets/pro/del_gm_img_hover.svg') no-repeat;
                    }
                }

                .set-tag {
                    position: absolute;
                    left: calc((100% - 79px) / 2);
                    top: calc((100% - 26px) / 2 + 25px);
                    background: rgba(0, 0, 0, 0.4);
                    width: 79px;
                    line-height: 26px;
                    text-align: center;
                    border-radius: 13px;
                    line-height: 26px;
                    color: #fff;

                    &:hover {
                        background: rgba(0, 0, 0, 0.6);
                    }
                }

                .select-btn {
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    right: 7px;
                    top: 7px;
                    background: url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
                    background-size: cover;
                    display: none;

                    &.active {
                        background: url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
                        background-size: cover;
                    }
                }

                &.no-img {
                    border: 1px dashed #52525C;
                }

                .hid-el {
                    opacity: 0;
                    z-index: -1;
                    transition: .1s all linear;
                }

                &:hover {
                    .hid-el {
                        opacity: 1;
                        z-index: 1;
                    }
                }

                &.act-sel {
                    .hid-el {
                        display: none;
                    }

                    .select-btn {
                        display: inherit;
                    }
                }
            }
        }
    }

    .bot-single-upload-area {
        text-align: center;
        height: 105px;
        border: 2px dashed #52525C;
        border-radius: 16px;
        user-select: none;
        background: #23232A;
        position: relative;
        transition: .1s all linear;

        .plus {
            background: url('../../assets/pro/upload_cover.svg') no-repeat;
            background-position: 35% center !important;
            background-size: 22px 22px;
            padding-left: 30px;
            margin-top: 25px;
            line-height: 22px;
            margin-bottom: 14px;
            font-size: 14px;
            font-weight: 500;

            display: flex !important;
            align-items: center;
            justify-content: center;

            .go-add {
                font-size: 16px;
                color: #11CCB1;
                font-weight: 500;
                text-decoration: underline;
                margin-left: 3px;

                >div:last-child {
                    position: absolute !important;
                    left: 0 !important;
                    top: 0 !important;
                    height: 100% !important;
                    width: 100% !important;
                    opacity: 0;
                }
            }
        }

        .plus-sk {
            background: url('../../assets/pro/sk_upload_ico.svg') no-repeat;
            background-position: left center;
            background-size: 22px 22px;
            display: inline-block;
            padding-left: 30px;
            margin-top: 25px;
            line-height: 22px;
            margin-bottom: 14px;
        }

        .tip {
            font-size: 14px;
            color: #969696;
            font-weight: 500;
            display: block;
        }

        &.sk-hover,
        &.webuploader-dnd-over {
            border-color: #11CCB1;
            background-color: #250C12;
        }
    }

    .footer-fun-bar {
        padding: 18px 0px;
        // text-align: right;
        user-select: none;

        >a {
            display: inline-block;
            line-height: 44px;
            font-size: 16px;
            font-weight: 500;
            &:not(.publish):hover{
                background:#393740;
            }
        }

        .draft {
            background: #29272F;
            color: #fff;
            width: 120px;
            text-align: center;
            border-radius: 10px;
        }

        .preview {
            background: #29272F;
            color: #fff;
            width: 110px;
            text-align: center;
            border-radius: 10px;
            margin: 0px 10px;
        }

        .publish {
            background: #11CCB1;
            color: #fff;
            padding:0px 20px;
            // width: 110px;
            text-align: center;
            border-radius: 10px;
        }
    }
}
</style>